<template>
  <div class="title-wrapper">
    <div
      :style="{ backgroundImage: `url(${image})` }"
      class="title-avatar"
    ></div>
    <div class="info-container">
      <span class="display_name">{{ name }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "UserTitle",
  props: {
    image: {
      type: String,
      required: true
    },
    name: {
      type: String,
      required: true
    }
  }
};
</script>

<style lang="scss" scoped>
.title-wrapper {
  width: 150px;
  height: 150px;
  margin-left: 50px;
  margin-bottom: 20px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  cursor: default;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.title-avatar {
  width: 100%;
  height: 100%;
  background-position: center center;
  background-size: cover;
  border-radius: 50%;
  overflow: hidden;
  position: absolute;
}
.info-container {
  position: relative;
  margin-left: 220px;
  margin-top: 20px;
  height: 150px;
  line-height: 200px;
  .display_name {
    font-size: 48px;
    line-height: 48px;
    color: #212121;
    position: absolute;
    top: 25px;
  }
}
</style>
